Fix bumped specificity for layout styles in non-iframed editor #64076
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
talldan
added
[Type] Bug
talldan
force-pushed
the
fix/specificity-iframed-editor
branch
from
a7c4d98
to
2e67d28
Compare
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
talldan
force-pushed
the
fix/specificity-iframed-editor
branch
from
2e67d28
to
73962fe
Compare
talldan
changed the title
talldan
requested review from
noisysocks,
ramonjd,
kevin940726 and
andrewserong
andrewserong
reviewed
Aug 1, 2024
There was a problem hiding this comment.
Thanks for digging into this one!
I'm curious as to why we need to change the PHP output of the layout support instead of updating transformStyles to resolve it and / or handle layout styles differently via a utility function. Since this will affect the output on the site frontend it sounds like a broader change than only looking at styling in the non-iframed editor?
My main concern whenever looking at the layout styles we're outputting is that it can be tricky to predict how it might affect themes out in the wild, and tellthemachines isn't currently around, who I usually ping for insights into these kinds of changes 😄
|
I had a look at something like that originally as part of another PR I'm working on (#63972), but I have concerns over how reliable it'd be because it'd mean quite a bit of manipulation of the selector. The
This also changes the selectors back to be closer to how they were prior to #61638 (where the problem was introduced), the change to the selectors before that was in #60228 if you want to have a look at the history. (I should have left some of that info in the PR description) |
|
Thanks for the extra context! In that case, should we also be updating the JS version I mightn't get a chance to test this in much detail this week, but happy to give it a proper run through next week if it's still open. I'll just add @ellatrix as a reviewer too, given the history with #61638. So far it's testing well for me in the iframed and non iframed editors, according to the testing instructions (and other blocks like Heading, etc have their default layout rules applied as expected):
|
talldan
changed the title
|
I think I might have found a difference that this PR creates compared to On 
With this PR, it looks like the Group block's block spacing value wins out: 
Are you able to replicate that? The steps I used:
|
edit: I was incorrectly looking at the fallback styles in the above comment. I've pushed a commit to update the JS version. |
I'm not seeing that, and I'm not sure why it would happen as the styles in your screenshot have the same specificity as before and I haven't changed anything else. There is something else that seems wrong (in both trunk and this PR). If I follow your steps I see different results depending on whether I have this snippet in my theme's theme.json or not: "core/paragraph": {
"spacing": {
"margin": {
"top": "4rem",
"bottom": "4rem"
}
}
},I wouldn't expect that as the styles are being overridden by global styles. Possibly this is what you were seeing too? Maybe you accidentally removed the snippet when changing branches. It might be that the styles are being added in a different order depending on whether theme.json defines some block margin. 🤔 |
|
Size Change: +4 B (0%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
Thanks for trying to reproduce! I think this was my own user error when running through this quickly yesterday. So far it's all looking consistent to me while testing locally, but I'll run it through a few more themes to be sure 👍 |
|
Alrighty, so this appears to be testing well for me so far, but it'd be good to get another set of 👀 to confirm. One question, it looks like this PR is only updating the specificity for the spacing styles rules. Do they also need to be updated for the base styles, too? I'm imagining not? 
Around this line and beyond: gutenberg/lib/class-wp-theme-json-gutenberg.php Line 1763 in 65410c2 I couldn't see any issues caused by the existing base layout rules between the iframed and non-iframed editor (I think the rules were last updated in #60228), so it sounds like they could probably remain as-is for now? From my perspective it's good if we can do the smallest set of changes required to fix the bug at hand. In testing so far with this PR:
So, all looks promising to me! |
This was referenced Aug 5, 2024
I'm not sure, you might have to point me to the base styles. There have been a couple of reports that I still need to investigate that look similar to this: |
talldan
force-pushed
the
fix/specificity-iframed-editor
branch
from
32eca75
to
09f1d6e
Compare
They're in the same function, from this line onwards: gutenberg/lib/class-wp-theme-json-gutenberg.php Line 1765 in 245248e The logic is fairly similar to the spacing styles, in that the rules are grabbed from the layout definitions here: gutenberg/lib/block-supports/layout.php Line 17 in 0af7e14 Then they're constructed around here: gutenberg/lib/class-wp-theme-json-gutenberg.php Line 1782 in 245248e And here: gutenberg/lib/class-wp-theme-json-gutenberg.php Line 1830 in 245248e |
|
@andrewserong I'm not seeing any issues - I tried lots of different layouts and they look the same between iframed/non-iframed editors, and behave the same when applying global styles and block styles. It's hard to test exhaustively as those rules do generate a lot of selectors (there really needs to be automated testing in place rather than relying on manual testing). There is a similar non-iframed bug to this reported in #63925, though it's more related to element/block styles selectors so I think a separate PR would make sense. I'm still not sure what the fix will look like for that one. |
|
Thanks for checking @talldan! In that case, it sounds like let's keep the base styles as they are — the fewer things we need to change in one PR, the better, IMO 🙂 |
andrewserong
approved these changes
Aug 8, 2024
There was a problem hiding this comment.
After re-testing this is still testing well for me. Based on the discussions so far, I think it's good that this change is contained to just the spacing part of the layout styles as that reduces the scope for potential breakages given that changes here rely heavily on manual testing 👍
I ran through the same testing steps as last week, all looking good. I thought I found a bug at first when setting paragraph margins at the block level in global styles and how those margins work at the root level in the site editor. It looks like there's an inconsistency in the order of the output between the site editor and site frontend, and it's the same in this PR as on trunk, so not a blocker to landing. Just thought I'd mention it here in case anyone else runs into it while testing.
Note here that the root layout rules override the paragraph margins in the site editor but not the site frontend:
| Site editor | Site frontend |
|---|---|
 |
 |
LGTM, but it'd be good to get a second review since this is aimed at 6.6.2.
andrewserong
added
the
Backport to WP Minor Release
ramonjd
approved these changes
Aug 8, 2024
There was a problem hiding this comment.
I compared output in the un-iframed and framed editors, and the frontend.
✅ Theme.json/global spacing styles are applied as expected with the 'un-iframed' editor
| Before | After |
|---|---|
 |
 |
✅ Block styles are overriding theme.json/global styles on the frontend
I tested Group blocks as well in various types (row, grid etc) and can't find any discrepencies.
aaronrobertshaw
approved these changes
Aug 9, 2024
There was a problem hiding this comment.
Thanks for fixing this one @talldan and @andrewserong for the extra checklist of things to test 🙇
I've also given this PR a run according to the test instructions and checklist in #64076 (comment). It's working well for me. Nice work!
| Site Editor | Frontend |
|---|---|
 |
 |
| Post Editor (non-iframed) | Frontend |
|---|---|
 |
 |
It looks like there's an inconsistency in the order of the output between the site editor and site frontend
I can see the different style order in the provided screenshots but when I was testing locally I couldn't replicate the issue. The ordering remained consistent between both editors and the frontend.
Modifying block margins etc at either the block type level or root styles level didn't seem to make a difference. I could be missing something of course but thought I'd flag that I wasn't seeing the issue.
Edit: Appears I was looking at the .is-layout-constrained style rather than root block gap styles with .wp-site-blocks
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Aug 13, 2024
Fixes a regression introduced in [58241] which inadvertently bumped the specificity in a non-iframed editor for `.editor-styles-wrapper .is-layout-flow > *` from (0,1,0) to (0,2,0). This fix restores theme.json spacing rules taking precedence over the implicit spacing rules in a non-iframed editor. **The What** When the block editor is not iframed (which can happen when Custom Fields are active, or blocks that use and older `apiVersion` are present), style rules are processed using post css to append the `.editor-styles-wrapper` class name. This has the effect of scoping the the style rules to ensure they don't affect the editor chrome or admin. With [58241], one of the rules was changed to `.is-layout-flow > *`. In a iframed editor, the specificity of this rule is okay (0,1,0), but in a non-iframed editor it becomes `.editor-styles-wrapper .is-layout-flow > *`, a specificity of (0,2,0). Comparing this to before [58241], the same rule was `.editor-styles-wrapper :where(body .is-layout-flow) > *` (specificity 0,1,0). This is a regression in specificity that has caused some issues. Notably themes can no longer properly override the spacing for blocks using theme.json and have the results correctly shown in the non-iframed editor. **The How** This changeset modifies the selector to `:root :where(.is-layout-flow) > *` (still specificity 0,1,0). `transformStyles` handles 'root' selectors a little differently, it'll instead replace the `:root` part so it becomes `.editor-styles-wrapper where(.is-layout-flow) > *` (keeping the specificity at 0,1,0). The other layout selector that this affects is the `:first-child` `:last-child` selectors that are responsible for resetting margin at the start and end of a block list. They traditionally have a 0,2,0 specificity so that they can override both the above rule and any rules in the theme.json. Those selectors are also maintained at 0,2,0 with this change, they become something like `:root :where(.is-layout-flow) > :first-child`. **References:** * PHP changes from [WordPress/gutenberg#64076 Gutenberg PR 64076]. Follow-up to [58241], [58228], [55956], [54162]. Props talldanwp, aaronrobertshaw, andrewserong, markhowellsmead, ramonopoly, hellofromTonya. Fixes #61829. git-svn-id: https://develop.svn.wordpress.org/trunk@58890 602fd350-edb4-49c9-b593-d223f7449a82
|
PHP changes were committed into WordPress Core's trunk via https://core.trac.wordpress.org/changeset/58890. |
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Aug 13, 2024
Fixes a regression introduced in [58241] which inadvertently bumped the specificity in a non-iframed editor for `.editor-styles-wrapper .is-layout-flow > *` from (0,1,0) to (0,2,0). This fix restores theme.json spacing rules taking precedence over the implicit spacing rules in a non-iframed editor. **The What** When the block editor is not iframed (which can happen when Custom Fields are active, or blocks that use and older `apiVersion` are present), style rules are processed using post css to append the `.editor-styles-wrapper` class name. This has the effect of scoping the the style rules to ensure they don't affect the editor chrome or admin. With [58241], one of the rules was changed to `.is-layout-flow > *`. In a iframed editor, the specificity of this rule is okay (0,1,0), but in a non-iframed editor it becomes `.editor-styles-wrapper .is-layout-flow > *`, a specificity of (0,2,0). Comparing this to before [58241], the same rule was `.editor-styles-wrapper :where(body .is-layout-flow) > *` (specificity 0,1,0). This is a regression in specificity that has caused some issues. Notably themes can no longer properly override the spacing for blocks using theme.json and have the results correctly shown in the non-iframed editor. **The How** This changeset modifies the selector to `:root :where(.is-layout-flow) > *` (still specificity 0,1,0). `transformStyles` handles 'root' selectors a little differently, it'll instead replace the `:root` part so it becomes `.editor-styles-wrapper where(.is-layout-flow) > *` (keeping the specificity at 0,1,0). The other layout selector that this affects is the `:first-child` `:last-child` selectors that are responsible for resetting margin at the start and end of a block list. They traditionally have a 0,2,0 specificity so that they can override both the above rule and any rules in the theme.json. Those selectors are also maintained at 0,2,0 with this change, they become something like `:root :where(.is-layout-flow) > :first-child`. **References:** * PHP changes from [WordPress/gutenberg#64076 Gutenberg PR 64076]. Follow-up to [58241], [58228], [55956], [54162]. Props talldanwp, aaronrobertshaw, andrewserong, markhowellsmead, ramonopoly, hellofromTonya. Fixes #61829. Built from https://develop.svn.wordpress.org/trunk@58890 git-svn-id: http://core.svn.wordpress.org/trunk@58286 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot
pushed a commit
to platformsh/wordpress-performance
that referenced
this pull request
Aug 13, 2024
Fixes a regression introduced in [58241] which inadvertently bumped the specificity in a non-iframed editor for `.editor-styles-wrapper .is-layout-flow > *` from (0,1,0) to (0,2,0). This fix restores theme.json spacing rules taking precedence over the implicit spacing rules in a non-iframed editor. **The What** When the block editor is not iframed (which can happen when Custom Fields are active, or blocks that use and older `apiVersion` are present), style rules are processed using post css to append the `.editor-styles-wrapper` class name. This has the effect of scoping the the style rules to ensure they don't affect the editor chrome or admin. With [58241], one of the rules was changed to `.is-layout-flow > *`. In a iframed editor, the specificity of this rule is okay (0,1,0), but in a non-iframed editor it becomes `.editor-styles-wrapper .is-layout-flow > *`, a specificity of (0,2,0). Comparing this to before [58241], the same rule was `.editor-styles-wrapper :where(body .is-layout-flow) > *` (specificity 0,1,0). This is a regression in specificity that has caused some issues. Notably themes can no longer properly override the spacing for blocks using theme.json and have the results correctly shown in the non-iframed editor. **The How** This changeset modifies the selector to `:root :where(.is-layout-flow) > *` (still specificity 0,1,0). `transformStyles` handles 'root' selectors a little differently, it'll instead replace the `:root` part so it becomes `.editor-styles-wrapper where(.is-layout-flow) > *` (keeping the specificity at 0,1,0). The other layout selector that this affects is the `:first-child` `:last-child` selectors that are responsible for resetting margin at the start and end of a block list. They traditionally have a 0,2,0 specificity so that they can override both the above rule and any rules in the theme.json. Those selectors are also maintained at 0,2,0 with this change, they become something like `:root :where(.is-layout-flow) > :first-child`. **References:** * PHP changes from [WordPress/gutenberg#64076 Gutenberg PR 64076]. Follow-up to [58241], [58228], [55956], [54162]. Props talldanwp, aaronrobertshaw, andrewserong, markhowellsmead, ramonopoly, hellofromTonya. Fixes #61829. Built from https://develop.svn.wordpress.org/trunk@58890 git-svn-id: https://core.svn.wordpress.org/trunk@58286 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2 tasks
getdave
pushed a commit
that referenced
this pull request
Aug 14, 2024
* Fix too specific layout styles in non-iframed editor * Ensure first/last child rules take precedence * Adjust selectors so that `> :first-child`/`> :last-child` still has 0,2,0 specificity to override theme.json spacing * Update tests * Update client side layout selectors to match theme json * Add backport changelog ---- Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
vcanales
pushed a commit
that referenced
this pull request
Sep 4, 2024
* Fix too specific layout styles in non-iframed editor * Ensure first/last child rules take precedence * Adjust selectors so that `> :first-child`/`> :last-child` still has 0,2,0 specificity to override theme.json spacing * Update tests * Update client side layout selectors to match theme json * Add backport changelog ---- Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Sep 4, 2024
Fixes a regression introduced in [58241] which inadvertently bumped the specificity in a non-iframed editor for `.editor-styles-wrapper .is-layout-flow > *` from (0,1,0) to (0,2,0). This fix restores theme.json spacing rules taking precedence over the implicit spacing rules in a non-iframed editor. **The What** When the block editor is not iframed (which can happen when Custom Fields are active, or blocks that use and older `apiVersion` are present), style rules are processed using post css to append the `.editor-styles-wrapper` class name. This has the effect of scoping the the style rules to ensure they don't affect the editor chrome or admin. With [58241], one of the rules was changed to `.is-layout-flow > *`. In a iframed editor, the specificity of this rule is okay (0,1,0), but in a non-iframed editor it becomes `.editor-styles-wrapper .is-layout-flow > *`, a specificity of (0,2,0). Comparing this to before [58241], the same rule was `.editor-styles-wrapper :where(body .is-layout-flow) > *` (specificity 0,1,0). This is a regression in specificity that has caused some issues. Notably themes can no longer properly override the spacing for blocks using theme.json and have the results correctly shown in the non-iframed editor. **The How** This changeset modifies the selector to `:root :where(.is-layout-flow) > *` (still specificity 0,1,0). `transformStyles` handles 'root' selectors a little differently, it'll instead replace the `:root` part so it becomes `.editor-styles-wrapper where(.is-layout-flow) > *` (keeping the specificity at 0,1,0). The other layout selector that this affects is the `:first-child` `:last-child` selectors that are responsible for resetting margin at the start and end of a block list. They traditionally have a 0,2,0 specificity so that they can override both the above rule and any rules in the theme.json. Those selectors are also maintained at 0,2,0 with this change, they become something like `:root :where(.is-layout-flow) > :first-child`. **References:** * PHP changes from [WordPress/gutenberg#64076 Gutenberg PR 64076]. Reviewed by andrewserong. Merges [58890] to the 6.6 branch. Follow-up to [58241], [58228], [55956], [54162]. Props talldanwp, aaronrobertshaw, andrewserong, markhowellsmead, ramonopoly, hellofromTonya, munyagu, apmeyer. Fixes #61829. git-svn-id: https://develop.svn.wordpress.org/branches/6.6@58986 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Sep 4, 2024
Fixes a regression introduced in [58241] which inadvertently bumped the specificity in a non-iframed editor for `.editor-styles-wrapper .is-layout-flow > *` from (0,1,0) to (0,2,0). This fix restores theme.json spacing rules taking precedence over the implicit spacing rules in a non-iframed editor. **The What** When the block editor is not iframed (which can happen when Custom Fields are active, or blocks that use and older `apiVersion` are present), style rules are processed using post css to append the `.editor-styles-wrapper` class name. This has the effect of scoping the the style rules to ensure they don't affect the editor chrome or admin. With [58241], one of the rules was changed to `.is-layout-flow > *`. In a iframed editor, the specificity of this rule is okay (0,1,0), but in a non-iframed editor it becomes `.editor-styles-wrapper .is-layout-flow > *`, a specificity of (0,2,0). Comparing this to before [58241], the same rule was `.editor-styles-wrapper :where(body .is-layout-flow) > *` (specificity 0,1,0). This is a regression in specificity that has caused some issues. Notably themes can no longer properly override the spacing for blocks using theme.json and have the results correctly shown in the non-iframed editor. **The How** This changeset modifies the selector to `:root :where(.is-layout-flow) > *` (still specificity 0,1,0). `transformStyles` handles 'root' selectors a little differently, it'll instead replace the `:root` part so it becomes `.editor-styles-wrapper where(.is-layout-flow) > *` (keeping the specificity at 0,1,0). The other layout selector that this affects is the `:first-child` `:last-child` selectors that are responsible for resetting margin at the start and end of a block list. They traditionally have a 0,2,0 specificity so that they can override both the above rule and any rules in the theme.json. Those selectors are also maintained at 0,2,0 with this change, they become something like `:root :where(.is-layout-flow) > :first-child`. **References:** * PHP changes from [WordPress/gutenberg#64076 Gutenberg PR 64076]. Reviewed by andrewserong. Merges [58890] to the 6.6 branch. Follow-up to [58241], [58228], [55956], [54162]. Props talldanwp, aaronrobertshaw, andrewserong, markhowellsmead, ramonopoly, hellofromTonya, munyagu, apmeyer. Fixes #61829. Built from https://develop.svn.wordpress.org/branches/6.6@58986 git-svn-id: http://core.svn.wordpress.org/branches/6.6@58382 1a063a9b-81f0-0310-95a4-ce76da25c4cd
talldan
added a commit
that referenced
this pull request
Sep 4, 2024
* Fix canvas issues by removing VisualEditor’s height (#63724) Unlinked contributors: wp-seopress. Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: carolinan <poena@git.wordpress.org> * Post Editor: Prevent popover from being hidden by metabox (#63939) * Post Editor: Prevent popover from being hidden by metabox * Use `.interface-interface-skeleton__content` instead of `.interface-interface-skeleton__body` Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: stokesman <presstoke@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: Rishit30G <rishit30g@git.wordpress.org> Co-authored-by: dhananjaykuber <dhananjaykuber@git.wordpress.org> * Global Styles: Fix block custom CSS pseudo element selectors (#63980) Unlinked contributors: harlet. Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: dballari <dballari@git.wordpress.org> Co-authored-by: wongjn <wongjn@git.wordpress.org> * Avoid errors for post types without a 'menu_icon' (#64015) Unlinked contributors: karan4official. Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> * Data Views: Don't render action modal when there are no eligible items (#64250) Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> * Post editor: apply space below content using a pseudo-element instead of padding-bottom (#64639) Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: stokesman <presstoke@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: carolinan <poena@git.wordpress.org> Co-authored-by: PC888 <kracked888@git.wordpress.org> * Featured Image Block: Reduce CSS specificity (#64463) Co-authored-by: dsas <dsas@git.wordpress.org> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> * Inserter: use lighter grammar parse to check allowed status (#64902) Co-authored-by: ellatrix <ellatrix@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org> * Prepare JSON schemas for Draft 7 update (#63582) Co-authored-by: ajlende <ajlende@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: scruffian <scruffian@git.wordpress.org> * Fix missing ref support for textAlign and textColumns in theme.json schema (#63625) * Add missing ref support for textAlign and textColumns * Update the theme.json reference docs Co-authored-by: ajlende <ajlende@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: jeryj <jeryj@git.wordpress.org> * Don't allow duplicating template parts in non-block-based themes (#64379) Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: MadtownLems <madtownlems@git.wordpress.org> * Fix bumped specificity for layout styles in non-iframed editor (#64076) * Fix too specific layout styles in non-iframed editor * Ensure first/last child rules take precedence * Adjust selectors so that `> :first-child`/`> :last-child` still has 0,2,0 specificity to override theme.json spacing * Update tests * Update client side layout selectors to match theme json * Add backport changelog ---- Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> * Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in `:where` selectors (#64458) * Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors * Add extra test for :where with a pseudo selector ---- Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: andreiglingeanu <andreiglingeanu@git.wordpress.org> * Revert "Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in `:where` selectors (#64458)" This reverts commit 53a370e. * Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in `:where` selectors (#64458) * Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors * Add extra test for :where with a pseudo selector ---- Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: andreiglingeanu <andreiglingeanu@git.wordpress.org> * Post Editor: fix click space after post content to append (#64992) * Fix minimally * Revise comment * Stop propagation and don’t prevent default * Insert default block if no blocks are present * re-build package lock to match format * Revert "Inserter: use lighter grammar parse to check allowed status (#64902)" This reverts commit 9b9bbe8. --------- Co-authored-by: Mitchell Austin <mr.fye@oneandthesame.net> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: carolinan <poena@git.wordpress.org> Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Co-authored-by: stokesman <presstoke@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: Rishit30G <rishit30g@git.wordpress.org> Co-authored-by: dhananjaykuber <dhananjaykuber@git.wordpress.org> Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: dballari <dballari@git.wordpress.org> Co-authored-by: wongjn <wongjn@git.wordpress.org> Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: Daniel Richards <daniel.richards@automattic.com> Co-authored-by: PC888 <kracked888@git.wordpress.org> Co-authored-by: Dean Sas <dean@deansas.org> Co-authored-by: dsas <dsas@git.wordpress.org> Co-authored-by: Ella <4710635+ellatrix@users.noreply.github.com> Co-authored-by: ellatrix <ellatrix@git.wordpress.org> Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: Alex Lende <alex+github.com@lende.xyz> Co-authored-by: ajlende <ajlende@git.wordpress.org> Co-authored-by: scruffian <scruffian@git.wordpress.org> Co-authored-by: jeryj <jeryj@git.wordpress.org> Co-authored-by: MadtownLems <madtownlems@git.wordpress.org>
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Sep 4, 2024
Updates the versions from the [WordPress/gutenberg@a74a70e released packages] for the following bugfixes: * [WordPress/gutenberg#63980 Global Styles: Fix block custom CSS pseudo element selectors] * [WordPress/gutenberg#64463 Featured Image Block: Reduce CSS specificity] * [WordPress/gutenberg#64076 Fix bumped specificity for layout styles in non-iframed editor] * [WordPress/gutenberg#64379 Don't allow duplicating template parts in non-block-based themes] * [WordPress/gutenberg#64250 Data Views: Don't render action modal when there are no eligible items] * [WordPress/gutenberg#63724 Fix canvas issues by removing VisualEditor’s height] * [WordPress/gutenberg#64992 Post Editor: fix click space after post content to append] * [WordPress/gutenberg#63939 Post Editor: Prevent popover from being hidden by metabox] * [WordPress/gutenberg#64639 Post editor: apply space below content using a pseudo-element instead of padding-bottom] * [WordPress/gutenberg#64015 Avoid errors for post types without a 'menu_icon'] * [WordPress/gutenberg#64458 Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors] Props vcanales. Fixes #61982. See #61704, #61769, #61829. git-svn-id: https://develop.svn.wordpress.org/trunk@58988 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Sep 4, 2024
Updates the versions from the [WordPress/gutenberg@a74a70e released packages] for the following bugfixes: * [WordPress/gutenberg#63980 Global Styles: Fix block custom CSS pseudo element selectors] * [WordPress/gutenberg#64463 Featured Image Block: Reduce CSS specificity] * [WordPress/gutenberg#64076 Fix bumped specificity for layout styles in non-iframed editor] * [WordPress/gutenberg#64379 Don't allow duplicating template parts in non-block-based themes] * [WordPress/gutenberg#64250 Data Views: Don't render action modal when there are no eligible items] * [WordPress/gutenberg#63724 Fix canvas issues by removing VisualEditor’s height] * [WordPress/gutenberg#64992 Post Editor: fix click space after post content to append] * [WordPress/gutenberg#63939 Post Editor: Prevent popover from being hidden by metabox] * [WordPress/gutenberg#64639 Post editor: apply space below content using a pseudo-element instead of padding-bottom] * [WordPress/gutenberg#64015 Avoid errors for post types without a 'menu_icon'] * [WordPress/gutenberg#64458 Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors] Props vcanales. Fixes #61982. See #61704, #61769, #61829. Built from https://develop.svn.wordpress.org/trunk@58988 git-svn-id: http://core.svn.wordpress.org/trunk@58384 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot
pushed a commit
to gilzow/wordpress-performance
that referenced
this pull request
Sep 4, 2024
Updates the versions from the [WordPress/gutenberg@a74a70e released packages] for the following bugfixes: * [WordPress/gutenberg#63980 Global Styles: Fix block custom CSS pseudo element selectors] * [WordPress/gutenberg#64463 Featured Image Block: Reduce CSS specificity] * [WordPress/gutenberg#64076 Fix bumped specificity for layout styles in non-iframed editor] * [WordPress/gutenberg#64379 Don't allow duplicating template parts in non-block-based themes] * [WordPress/gutenberg#64250 Data Views: Don't render action modal when there are no eligible items] * [WordPress/gutenberg#63724 Fix canvas issues by removing VisualEditor’s height] * [WordPress/gutenberg#64992 Post Editor: fix click space after post content to append] * [WordPress/gutenberg#63939 Post Editor: Prevent popover from being hidden by metabox] * [WordPress/gutenberg#64639 Post editor: apply space below content using a pseudo-element instead of padding-bottom] * [WordPress/gutenberg#64015 Avoid errors for post types without a 'menu_icon'] * [WordPress/gutenberg#64458 Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors] Props vcanales. Fixes #61982. See #61704, #61769, #61829. Built from https://develop.svn.wordpress.org/trunk@58988 git-svn-id: https://core.svn.wordpress.org/trunk@58384 1a063a9b-81f0-0310-95a4-ce76da25c4cd
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Sep 4, 2024
Updates the versions from the [WordPress/gutenberg@a74a70e released packages] for the following bugfixes: - [WordPress/gutenberg#63980 Global Styles: Fix block custom CSS pseudo element selectors] - [WordPress/gutenberg#64463 Featured Image Block: Reduce CSS specificity] - [WordPress/gutenberg#64076 Fix bumped specificity for layout styles in non-iframed editor] - [WordPress/gutenberg#64379 Don't allow duplicating template parts in non-block-based themes] - [WordPress/gutenberg#64250 Data Views: Don't render action modal when there are no eligible items] - [WordPress/gutenberg#63724 Fix canvas issues by removing VisualEditor’s height] - [WordPress/gutenberg#64992 Post Editor: fix click space after post content to append] - [WordPress/gutenberg#63939 Post Editor: Prevent popover from being hidden by metabox] - [WordPress/gutenberg#64639 Post editor: apply space below content using a pseudo-element instead of padding-bottom] - [WordPress/gutenberg#64015 Avoid errors for post types without a 'menu_icon'] - [WordPress/gutenberg#64458 Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors] Reviewed by jorbin, hellofromTonya. Merges [58988] to the 6.6 branch. Props vcanales. Fixes #61982. See #61704, #61769, #61829. git-svn-id: https://develop.svn.wordpress.org/branches/6.6@58989 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Sep 4, 2024
Updates the versions from the [WordPress/gutenberg@a74a70e released packages] for the following bugfixes: - [WordPress/gutenberg#63980 Global Styles: Fix block custom CSS pseudo element selectors] - [WordPress/gutenberg#64463 Featured Image Block: Reduce CSS specificity] - [WordPress/gutenberg#64076 Fix bumped specificity for layout styles in non-iframed editor] - [WordPress/gutenberg#64379 Don't allow duplicating template parts in non-block-based themes] - [WordPress/gutenberg#64250 Data Views: Don't render action modal when there are no eligible items] - [WordPress/gutenberg#63724 Fix canvas issues by removing VisualEditor’s height] - [WordPress/gutenberg#64992 Post Editor: fix click space after post content to append] - [WordPress/gutenberg#63939 Post Editor: Prevent popover from being hidden by metabox] - [WordPress/gutenberg#64639 Post editor: apply space below content using a pseudo-element instead of padding-bottom] - [WordPress/gutenberg#64015 Avoid errors for post types without a 'menu_icon'] - [WordPress/gutenberg#64458 Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in :where selectors] Reviewed by jorbin, hellofromTonya. Merges [58988] to the 6.6 branch. Props vcanales. Fixes #61982. See #61704, #61769, #61829. Built from https://develop.svn.wordpress.org/branches/6.6@58989 git-svn-id: http://core.svn.wordpress.org/branches/6.6@58385 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Core backport PR - WordPress/wordpress-develop#7145
Core backport trac ticket - https://core.trac.wordpress.org/ticket/61829
What?
Fixes the issue mentioned in #53468 (comment) to restore theme.json spacing rules taking precedence over the implicit spacing rules in a non-iframed editor.
How?
In
trunkthe code generates a selector like.is-layout-flow > *(specificity 0,1,0) which is fine normally. When in a non-iframed editor, thetransformStylesfunction prefixes selectors with.editor-styles-wrapperto scope them to the editor canvas, so it becomes.editor-styles-wrapper .is-layout-flow > *(specificity 0,2,0), a bump in specificity that causes the precedence of styles to change.In this PR I've changed the selector to
:root :where(.is-layout-flow) > *(still specificity 0,1,0).transformStyleshandles 'root' selectors a little differently, it'll instead replace the:rootpart so it becomes.editor-styles-wrapper where(.is-layout-flow) > *(keeping the specificity at 0,1,0).The other layout selector that this affects is the
:first-child:last-childselectors that are responsible for resetting margin at the start and end of a block list. They traditionally have a 0,2,0 specificity so that they can override both the above rule and any rules in the theme.json. Those selectors are also maintained at 0,2,0 with this change, they become something like:root :where(.is-layout-flow) > :first-child.Here's a list of selectors that will be updated (according to our php tests)
Testing Instructions
styles.blocks):4remtop/bottom margin.Also worth checking out
trunkand comparing the styles. You should see that in trunk the iframed editor looks correct, but when you activate custom fields the non-iframed editor styles are broken.Screenshots or screencast
Before
After